import React from "react";
import {
    PageContainer,
    ProForm,
    ProFormTextArea, ProFormUploadButton
} from "@ant-design/pro-components";
import {PostType} from "@/models/post";
import {message, Modal, UploadProps} from "antd";
import {uploadImage, uploadVideo} from "@/services/fileService";
import {addVideo} from "@/services/videoService";
// @ts-ignore
import {VideoType} from "@/models/video";

const query:VideoType.VideoAddRequest = {
    videoThumbnailUrl:"",
    videoFileUrl: "",
    text:""
}


interface Props {
    visible: boolean;
    initData:()=>void;
    onClose: () => void;
}

/**
 * 视频上传
 * @param options
 */
const videoUpload = (options: any) => {
    console.log(options.file)
    let formData = new FormData();
    formData.append("file", options.file);

    const data: PostType.PostPhotoRequest = {
        biz: 'user_video',
        file: formData.get("file")
    }

    uploadVideo(data).then(res => {
        query.videoFileUrl = res.data;
        options.onSuccess(res, options.file);
    }).catch(err => {
        console.log(err)
        options.onError(err)
    });
}

const videoProps: UploadProps = {
    name: 'file',
    action: '',
    headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8',
    },
    customRequest: videoUpload
}

/**
 * 上传图片
 * @param options
 */
const imageUpload = (options: any) => {
    console.log(options.file)
    let formData = new FormData();
    formData.append("file", options.file);

    const data: PostType.PostPhotoRequest = {
        biz: 'user_video_cover',
        file: formData.get("file")
    }

    uploadImage(data).then(res => {
        query.videoThumbnailUrl = res.data;
        options.onSuccess(res, options.file);
    }).catch(err => {
        console.log(err)
        options.onError(err)
    });
}

const imageProps: UploadProps = {
    name: 'file',
    action: '',
    headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8',
    },
    customRequest: imageUpload
}




/**
 * 添加视频页面
 * @constructor
 */
const VideoAddModal: React.FC<Props> = (props) => {

    let {visible, onClose,initData} = props;
    /**
     * 创建
     * @param fields
     */
    const doAdd = async (fields: VideoType.VideoAddRequest) => {
        const hide = message.loading('正在提交');
        try {
            query.text = fields.text;
            await addVideo(query).then(res=>{
                // 重新加载数据
                initData()
                // 关闭页面
                onClose()
                message.success('上传成功');
            }).catch(e=>{
                message.error(e.message)
            })
        } catch (e: any) {
            message.error('上传失败，请重试！', e.message);
        } finally {
            hide();
        }
    };

    return (
        <Modal
            title="上传视频"
            visible={visible}
            footer={null}
            onCancel={onClose}
        >
            <ProForm<VideoType.VideoAddRequest>
                onFinish={async (values) => {
                    await doAdd(values);

                }}
                requiredMark={false}
                labelAlign="left"
                labelCol={{
                    xs: 24,
                    sm: 4,
                    md: 3,
                    xl: 2,
                }}
                wrapperCol={{
                    xs: 24,
                    sm: 20,
                    md: 16,
                    xl: 14,
                }}
                submitter={{
                    submitButtonProps: {
                        style: {
                            minWidth: 160,
                        },
                    },
                    render: (props, dom) => [...dom.reverse()],
                }}
            >

                <ProFormUploadButton
                    label="视频封面"
                    max={1}
                    name="videoThumbnailUrl"
                    fieldProps={{
                        ...imageProps,
                    }}
                />

                <ProFormUploadButton
                    label="视频文件"
                    max={1}
                    name="videoFileUrl"
                    fieldProps={{
                        ...videoProps,
                    }}
                />

                <ProFormTextArea
                    name="text"
                    label="视频简介"
                    required
                    fieldProps={{
                        autoSize: {minRows: 4},
                    }}
                    rules={[{required: true, message: '需填写个人介绍'}]}
                />
            </ProForm>
        </Modal>
    );
};


export default VideoAddModal;
